<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
  <title>成长中心 - AI情绪魔镜</title>
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body>
  <div id="app">
    <header>
      <h1>成长中心</h1>
    </header>
    <main class="page">
      <h2>我的成长</h2>

      <!-- 情绪时间轴 -->
      <section class="card growth-section">
        <h3><i class="fas fa-chart-line"></i> 情绪时间轴</h3>
        <p>回顾您的情绪变化历程。</p>
        <div class="placeholder-area chart-placeholder">
            <!-- 情绪时间轴图表占位 -->
            <span>情绪变化图表</span>
        </div>
        <button onclick="alert('查看完整时间轴')">查看完整时间轴</button>
      </section>

      <!-- 成就系统 -->
      <section class="card growth-section">
        <h3><i class="fas fa-trophy"></i> 成就系统</h3>
        <p>您获得的成就徽章：</p>
        <div class="placeholder-area achievements-placeholder">
            <!-- 成就徽章占位 -->
            <i class="fas fa-medal achievement-badge"></i>
             <i class="fas fa-award achievement-badge"></i>
              <i class="fas fa-star achievement-badge"></i>
        </div>
         <button onclick="alert('查看所有成就')">查看所有成就</button>
      </section>

      <!-- 社交排行榜 -->
      <section class="card growth-section">
        <h3><i class="fas fa-users"></i> 社交排行榜</h3>
        <p>看看您在好友中的排名。</p>
         <div class="placeholder-area leaderboard-placeholder">
            <!-- 排行榜列表占位 -->
            <span>排行榜列表</span>
        </div>
        <button onclick="alert('查看排行榜')">查看排行榜</button>
      </section>

    </main>
    <footer>
      <nav>
        <button onclick="window.location.href='index.html'">
          <i class="fas fa-home"></i>
          <span>首页</span>
        </button>
        <button onclick="window.location.href='recognition.html'">
          <i class="fas fa-brain"></i>
          <span>识别中心</span>
        </button>
        <button onclick="window.location.href='intervention.html'">
          <i class="fas fa-hand-holding-heart"></i>
          <span>干预工坊</span>
        </button>
        <button class="active" onclick="window.location.href='growth.html'">
          <i class="fas fa-chart-line"></i>
          <span>成长中心</span>
        </button>
        <button onclick="window.location.href='my.html'">
          <i class="fas fa-user"></i>
          <span>我的</span>
        </button>
      </nav>
    </footer>
  </div>
  <script src="main.js"></script>
</body>
</html> 